import { Component, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import { getSalesRoyaltyRate } from '@/api/staff'
import type { RoyaltyRateDto } from '@/api/rate/types'
import type { AnyObject } from '@/types'
import { RateProductTypeCnEnum } from '@/const/enum'
import dayjs from 'dayjs'

@Component
export class WorkRecord extends TableRender {
    @Prop() userId!: number

    noFilterPadding = true
    noTablePadding = true

    dataList = [] as RoyaltyRateDto[]

    @Watch('userId')
    handleWatchUserId() {
        this.initData()
    }

    async initData() {
        const data = this.getFilters()
        this.dataList = await getSalesRoyaltyRate({
            userId: this.userId,
            startTime: dayjs(data.month).startOf('month').format('YYYY-MM-DD'),
            endTime: dayjs(data.month).endOf('month').format('YYYY-MM-DD'),
        })
    }

    filterConfig() {
        return {
            month: {
                name: '月份',
                element: 'datetime',
                value: dayjs(new Date()).format('YYYY-MM'),
                clearable: false,
                span: 12,
                type: 'month',
                params: {
                    valueFormat: 'YYYY-MM',
                    format: 'YYYY-MM'
                },
                callback: {
                    change: () => {
                        this.reloadPage()
                    }
                }
            },
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'productType',
            title: '产品',
            formatter: ({row}) => {
                return RateProductTypeCnEnum[row.productType as keyof typeof RateProductTypeCnEnum]
            }
        },
        {
            field: 'royaltyRate',
            title: '提成比例'
        },
        {
            field: 'approvement',
            title: '业绩',
            formatter: ({row}) => {
                const map = {
                    '0': row.params?.pay?.firstAmount,
                    '1': row.params?.ele?.eleRechargeCount,
                    '2': row.params?.wesure?.amount,
                    '3': row.params?.period?.periodPremiumCount,
                    '4': row.params?.pay?.renewalAmount,
                    '5': '暂无',
                }
                return map[row.productType as keyof typeof map]
            }
        },

    ] as TableRenderColumnTypes<RoyaltyRateDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        const data = this.getFilters()
        return getSalesRoyaltyRate({
            userId: this.userId,
            startTime: dayjs(data.month).startOf('month').format('YYYY-MM-DD'),
            endTime: dayjs(data.month).endOf('month').format('YYYY-MM-DD'),
        })
    }

    render() {
        return (
            <div class="mt-20px">
                <div class="bg-white-dark-100 pl-10px mb-20px py-5px border-l-4px border-l-solid border-blue-default">工作记录</div>
                {super.render()}
            </div>
        )
    }
}

export default toNative<{userId: number}, {}>(WorkRecord)